<template>
	<view class="container">
		<!-- 搜索框 -->
		<view class="diy-search">
			<view class="inner" @click="onTargetSearch">
				<view class="search-input">
					<text class="search-icon iconfont icon-search"></text>
					<text>搜索你要找的商品</text>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="diy-banner">
			<!-- 图片轮播 -->
			<swiper class="swiper-box" indicator-dots="true" autoplay="true" :duration="800" :circular="true"
				:interval="1000">
				<swiper-item v-for="item in swiperImageList" :key="item.imgUrl">
					<image mode="widthFix" class="slide-image" :src="item.imgUrl" />
				</swiper-item>
			</swiper>
		</view>

		<!-- 店铺公告 -->
		<view class="diy-notice">
			<u-notice-bar padding="10rpx 24rpx" :volume-icon="true" :autoplay="true" :list="[notice]"></u-notice-bar>
		</view>

		<!-- 导航组 -->
		<view class="nav-list">
			<view class="nav-item" v-for="(item, i) in navList" :key="i">
				<image class="image" mode="widthFix" :src="item.imgUrl"></image>
				<view class="item-text oneline-hide">{{item.text}}</view>
			</view>
		</view>
		<!-- 广告图片 -->
		<view>
			<image class="ad-image" mode="widthFix" :src="adImageList[0] && adImageList[0].imgUrl" />
		</view>
		<!-- 广告文字 -->
		<view>
			<mp-html :content="adText"></mp-html>
		</view>
		<!-- 首页商品列表 -->
		<view class="goods-list">
			<view class="goods-item" v-for="(item, i) in goodsList" :key="i">
				<view class="item-left">
					<image class="left-image" mode="widthFix" :src="item.goods_image" />
				</view>
				<view class="item-right">
					{{item.goods_name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入网络请求函数
	import request from '@/utils/request'

	export default {
		components: {},
		data() {
			return {
				// 轮播图数据
				swiperImageList: [],
				// 店铺公告
				notice: '',
				// 导航数据
				navList: [],
				// 广告图片
				adImageList: [],
				// 广告文字
				adText: '',
				// 首页商品
				goodsList: [],
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 发起获取首页数据请求
			this.getIndexData()
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {},

		methods: {
			// 获取首页数据
			async getIndexData() {
				console.log('获取首页数据')
				const indexPageRes = await request.get('page/detail', {
					pageId: 0
				})
				console.log('indexPageRes', indexPageRes)
				// 轮播图
				this.swiperImageList = indexPageRes.data.pageData.items.find(item => item.name === '图片轮播').data
				// 公告
				this.notice = indexPageRes.data.pageData.items.find(item => item.name === '店铺公告').params.text
				// 导航组
				this.navList = indexPageRes.data.pageData.items.find(item => item.name === '导航组').data
				// 广告图片
				this.adImageList = indexPageRes.data.pageData.items.find(item => item.name === '图片').data
				// 广告文字
				this.adText = indexPageRes.data.pageData.items.find(item => item.name === '富文本').params.content
				// 商品列表
				this.goodsList = indexPageRes.data.pageData.items.find(item => item.name === '商品组').data
			},
		},

	}
</script>

<style lang="scss" scoped>
	.container {
		background: #fff;

		.diy-search {
			background: #f1f1f2;
			padding: 20rpx 20rpx;
			font-size: 26rpx;
		}

		.inner {
			height: 60rpx;
			background: #fff;
			overflow: hidden;

			&.radius {
				border-radius: 10rpx;
			}

			&.round {
				border-radius: 60rpx;
			}
		}

		.search-input {
			height: 60rpx;
			line-height: 60rpx;
			color: #999;
			padding: 0 20rpx;
			text-align: center;

			.search-icon {
				margin-right: 8rpx;
			}
		}

		.diy-banner {

			.slide-image {
				width: 100%;
			}

		}

		.nav-list {
			display: flex;
			flex-wrap: wrap;
			// border: 1px solid blue;

			.nav-item {
				width: 20vw;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 8rpx;
				// border: 1px solid red;

				.image {
					width: 88rpx;
					height: 88rpx;
				}

				.item-text {
					font-size: 26rpx;
				}
			}
		}

		.ad-image {
			width: 100%;
		}

		.goods-list {

			.goods-item {
				display: flex;

				.item-left {
					flex: 2;

					.left-image {
						width: 100%;
						// 解决图片基线对其的bug
						vertical-align: middle;
					}
				}

				.item-right {
					flex: 3;

				}
			}
		}
	}
</style>